<template>
  <el-dialog title="预览pdf" v-model="dialogVisible" class="box" width="30%">
    <PreviewPdf :source="pdfPreviewUrl" />
  </el-dialog>
</template>

<script setup>
  import { ref } from "vue";
  import PreviewPdf from "vue-pdf-embed";

  const dialogVisible = ref(false);
  const pdfPreviewUrl = ref("");

  // 打开
  const open = (
    url = "https://dyj-dc.oss-cn-beijing.aliyuncs.com/web/file_test/test.pdf"
  ) => {
    dialogVisible.value = true;
    pdfPreviewUrl.value = url;
  };
  // 关闭
  const close = () => {
    dialogVisible.value = false;
    dialogImageUrl.value = "";
  };

  // 组件实例
  defineExpose({
    open,
    close,
  });
</script>

<style lang="scss" scoped>
  .box {
    overflow: auto;
  }

  .previewImg {
    scale: 0.7;
    object-fit: fill;
  }
</style>
